@import './../../util/styles/index.scss';
.focus_new {
  // width: $width;
  margin: auto;
  position: relative;
  .bg_img {
    position: absolute;
    right: 0;
    top: 350px;
    z-index: 0;
  }
  .news_content {
    width: $width;
    margin: auto;
  }
  .header {
    background: url('./../../images/yaoweizix.png') 100% 100% no-repeat;
    background-size: 100% 100%;
    height: 23px;
    text-align: center;
    position: relative;
    img {
      position: absolute;
      width: 100px;
      height: 26px;
      top: -8px;
      left: 46.5%;
    }
  }
  .top {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-top: 34px;
      .swiper-container {
        width: 419px;
        height: 324px;
        position: relative;
          .swiper_item {
            width: 100%;
            height: 324px;
            position: relative;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
            p {
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
              background:rgba(0,0,0,0.53);
              padding: 15px;
              color: white;
              font-size: 14px;
              font-family: MicrosoftYaHei;
              font-weight: 400;
              letter-spacing: 1px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
      }
      .focus {
        width: 424px;
        height: 327px;
        position: relative;
        .pos {
          position: absolute;
          top: -33px;
          left: 13px;
          width: 55px;
          height: 55px;
        }
        .more {
          top: -25px;
          right: 0;
          position: absolute;
          color: $navActive;
          font-size: 12px;
          cursor: pointer;
        }
         .img_div {
           cursor: pointer;
           width: 100%;
           height: 212px;
           position: relative;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
            span {
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
              background:rgba(0,0,0,0.53);
              padding: 15px;
              color: white;
              font-size: 14px;
              font-family: MicrosoftYaHei;
              font-weight: 400;
              letter-spacing: 1px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
         }
         .text_div {
           cursor: pointer;
            display: flex;
            padding: 16px;
            flex-direction: column;
            justify-content: space-between;
            height: 82px;
            background:rgba(249,248,247,1);
             div {
               width: 100%;
               display: flex;
               align-items: center;
               img {
                width: 12px;
                height: 14px;
                margin-right: 13px;
               }
              span {
                width: calc(100% - 17px);
                font-size:14px;
                font-family:MicrosoftYaHei;
                font-weight:400;
                color:rgba(10,10,10,1);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                letter-spacing: 1px;
              }
             }
         }
      }
      .hot {
        width: 421px;
        position: relative;
        padding: 34px 0px;
        height: 255px;
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
        background: white;
        .pos {
          position: absolute;
          top: -33px;
          left: 13px;
          width: 55px;
          height: 55px;
        }
        .more {
          top: -25px;
          right: 0;
          position: absolute;
          color: $navActive;
          font-size: 12px;
          cursor: pointer;
        }
          div {
            cursor: pointer;
            display: flex;
            // width: 100%;
            height: calc(100% / 7);
            margin: 0px 34px; 
            align-items: center;
            .time {
              width: 55px;
              font-size: 12px;
              font-family:MicrosoftYaHei;
              font-weight:400;
              color:rgba(156,16,15,1);
            }
            .title {
              font-size:14px;
              font-family:MicrosoftYaHei;
              font-weight:400;
              width: calc(100% - 68px);
              color:rgba(10,10,10,1);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          div:last-child{
            padding-bottom: 0;
          }
      }
  }
  .center {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-top: 15px;
    padding-bottom: 31px;
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: $adverHeight;
    div {
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}